{% extends 'index.html' %}
{% load my_tag  my_filter %}
{% block css %}
    <link rel="stylesheet" href="/static/viewer/css/viewer.css">
    <link rel="stylesheet" href="/static/my/css/history.css">

{% endblock %}

{% block banner %}
    {% banner 'history' %}
{% endblock %}
{% block main %}
    <div class="main">

        <el-dialog
                :title="history_edit_add? '事件编辑' : '事件添加'"
                :visible.sync="history_dialogVisible"
                :before-close="history_handleClose"
                :width="max_dialog_width"
        >
            <div class="dialog_content">
                <div>
                    <label for="">事件标题</label>
                    <el-input v-model="history.title" placeholder="请输入事件标题"></el-input>
                </div>
                <div>
                    <label for="">事件日期</label>
                    <el-date-picker v-model="history.create_date" type="date"
                                    value-format="yyyy-MM-dd"
                                    :picker-options="history_picker_option"
                                    placeholder="选择日期"
                    >
                    </el-date-picker>
                </div>
                <div>
                    <label for="">事件内容</label>
                    <el-input
                            type="textarea"
                            :rows="4"
                            resize="none"
                            placeholder="请输入事件内容"
                            v-model="history.content"
                    ></el-input>
                </div>
                <div>
                    <label for="">事件配图</label>
                    <textarea
                            class="drawing"
                            rows="10"
                            placeholder="请输入事件配图"
                            v-model="history.drawing"
                            @paste="paste_upload"
                    ></textarea>
                </div>
                <div class="drawing_show">
                    <img :src="url" alt="" v-for="(url,index) in history_show_drawing" :key="index">
                </div>
            </div>

            <span slot="footer" class="dialog-footer">
    <el-button @click="history_dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="history_add_method(history_edit_add)">确 定</el-button>
  </span>
        </el-dialog>
        {% if request.user.is_superuser %}
            <h2 class="title" @click="history_dialogVisible = true">回忆录</h2>
        {% else %}
            <h2 class="title">回忆录</h2>
        {% endif %}

        <ul class="timeline-wrapper">
            {% for history in history_list %}
                <li class="timeline-item">
                    <div class="timeline-box">
                        <div class="out-circle">
                            {% if request.user.is_superuser %}
                                <div class="in-circle super" @click="history_remove('{{ history.nid }}',$event)"></div>
                            {% else %}
                                <div class="in-circle super"></div>
                            {% endif %}
                        </div>
                        <div class="long-line"></div>
                    </div>
                    <div class="timeline-content">
                        {% if request.user.is_superuser %}
                            <div content="{{ history.content }}" drawing="{{ history.drawing }}"
                                 @click="history_show($event,'{{ history.nid }}','{{ history.title }}','{{ history.create_date|date:'Y-m-d' }}')"
                                 class="timeline-date">{{ history.create_date|date:'Y-m-d' }}</div>
                        {% else %}
                            <div>{{ history.create_date|date:'Y-m-d' }}</div>
                        {% endif %}

                        <div class="timeline-title">{{ history.title }}</div>
                        <ul class="timeline-desc">
                            {% generate_li history.content %}
                        </ul>
                        <div class="peitu">
                            <div>
                                {% generate_drawing history.drawing %}
                            </div>
                        </div>
                    </div>
                </li>
            {% endfor %}


        </ul>
    </div>


{% endblock %}

{% block article_js %}
    <script src="/static/viewer/js/viewer.js"></script>
    <script>
        $('.peitu>div').viewer();
    </script>
{% endblock %}